<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- p标签就是我们想要把每一次的数据都反映上来的视图 -->
    <p></p>
  </div>
  <!-- 
    M -> V
   -->
  <script>
    // 1. 准备数据
    let data = {
      name: '柴柴老师'
    }
    // 2. 将数据转换成响应式 （数据发生变化之后操作我们的视图）
    Object.keys(data).forEach((key) => {
      defineReactive(data, key, data[key])
    })
    function defineReactive(data, key, value) {
      // 进行转换操作
      Object.defineProperty(data, key, {
        get() {
          console.log('您访问了属性', key)
          return value
        },
        set(newValue) {
          // set函数的执行 不会自动判断俩次修改的值是否相等
          // 显然如果相等 不应该执行变化的逻辑
          if (newValue === value) {
            return 
          }
          console.log('您修改了属性', key)
          value = newValue
          // 这里我们把最新的值 反映到视图中  这里是关键的位置
          // 核心：操作dom  就是通过操作dom api 把最新的值设置上去
          document.querySelector('#app p').innerText = newValue
          // 只要修改name属性 就会触发set函数的执行 内部我们把最新的值通过dom操作
          // 设置到dom内部  实现了数据的变化 反映到了视图中
        }
      })
    }
    document.querySelector('#app p').innerText = data.name
  </script>
</body>

</html>